<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>menu</title>
  <link rel="stylesheet" href="/static/admin/lib/layui-v2.6.3/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/admin/css/public.css" media="all">
  <style>
    .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
      height: 34px;
      line-height: 34px;
      padding: 0 8px;
    }
  </style>
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">
    <div>
      <div class="layui-btn-group">
        <button class="layui-btn" id="btn-expand">全部展开</button>
        <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
        <button class="layui-btn layui-btn-warm" id="add" ><i class="layui-icon"></i>添加</button>
      </div>
      <table id="munu-table" class="layui-table" lay-filter="munu-table">

      </table>
    </div>
  </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
  <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit"><i class="layui-icon"></i></button>
  <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del"><i class="layui-icon"></i></button>
</script>

<script src="/static/admin/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/static/admin/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
  layui.use(['table', 'treetable','form'], function () {
    var $ = layui.jquery
            ,table = layui.table
            ,treetable = layui.treetable
            ,layer = layui.layer
            ,form = layui.form;

    // 渲染表格
    layer.load(2);
    treetable.render({
      treeColIndex: 1,
      treeSpid: 0,
      treeIdName: 'menu_id',
      treePidName: 'pid',
      elem: '#munu-table',
      url: '/back/menu/lists',
      treeDefaultClose:false,
      treeLinkage:false,
      page: false,
      cols: [[
        {type: 'numbers'},
        {field: 'menu_name', minWidth: 200, title: '菜单名称'},
        {field: 'menu_icon',title:'菜单图标'},
        {field: 'menu_path', title: '菜单url'},
        {field: 'menu_sort', width: 80, align: 'center', title: '排序号'},
        {
          field: 'menu_type', width: 80, align: 'center', templet: function (d) {
            if (d.menu_type == 1) {
              return '<span class="layui-badge layui-bg-blue">目录</span>';
            }
            if (d.menu_type == 2) {
              return '<span class="layui-badge-rim">菜单</span>';
            }
            if(d.menu_type == 3){
              return '<span class="layui-badge layui-bg-gray">按钮</span>';
            }
          }, title: '类型'
        },
        {field: 'menu_status',title:'菜单状态',templet:function(d){
            let isChecked = d.menu_status == 1 ? "checked" : '';
            return '<input type="checkbox" lay-skin="switch" lay-filter="enabledState" data-id="'+d.menu_id+'" lay-text="启用|禁用" '+ isChecked +'> ';
          // if(d.menu_status == 1){
          //   return "<span class='layui-badge layui-bg-black'>启用</span>";
          // }else{
          //   return "<span class='layui-badge layui-bg-orange'>停用</span>";
          // }
        }},
        {field: 'operator',width: 80,title:"操作人"},
        {templet: '#auth-state', width: 190, align: 'center', title: '操作'}
      ]],
      done: function () {
        layer.closeAll('loading');
      }
    });

    $('#btn-expand').click(function () {
      treetable.expandAll('#munu-table');
    });

    $('#btn-fold').click(function () {
      treetable.foldAll('#munu-table');
    });


    // 监听状态开关
    form.on("switch(enabledState)",function(d){
      let menu_id = d.elem.getAttribute("data-id");
      // 异步修改
      $.ajax({
        url : '/back/menu/status',
        type:'POST',
        data:{menu_id:menu_id},
        beforeSend:function(){
          layer.msg('正在切换中,请稍后',{icon:16,shade:0.8});
        },
        success:function(res){
          if(res.code == 1){
            layer.msg(res.msg,{icon:1},function(){
              //var index = parent.layer.getFrameIndex(window.name);
              //parent.location.reload();
              //parent.layer.close(index);
            });
          }else{
            layer.msg(res,msg,{icon:2});
          }
        }
      });

      return false;
    });

    /**
     *  添加操作
     */
    $("#add").click(function(){
      var index = layer.open({
        title: '添加菜单',
        type: 2,
        shade: 0.2,
        maxmin:true,
        shadeClose: true,
        area: ['100%', '100%'],
        content: '/back/menu/add',
      });
    });


    //监听工具条
    table.on('tool(munu-table)', function (obj) {
      var data = obj.data;
      var layEvent = obj.event;

      if (layEvent === 'del') {
        layer.confirm('确认要删除该数据吗？', function (index) {
          $.ajax({
            url : '/back/menu/del?menu_id=' + data.menu_id,
            type : 'GET',
            success : function(res){
              if(res.code == 1){
                layer.msg(res.msg,{icon:1},function(){
                  parent.location.reload();
                  parent.layer.close(index);
                });
              }else{
                layer.msg(res.msg);
              }
            }
          });
        });
      } else if (layEvent === 'edit') {
        layer.open({
          title : '编辑菜单',
          type : 2,
          area : ['60%','60%'],
          content : '/back/menu/edit?menu_id=' + data.menu_id,
        });
      }
    });
  });
</script>
</body>
</html>